<template>
  <el-dialog title="新增" :visible.sync="dialogVisible" width="70%">
    <el-form :inline="true" size="mini" :model="filterForm" label-width="100px">
      <el-form-item label="计划开工时间">
        <el-select v-model="filterForm.startTime" placeholder="请选择">
          <el-option
            v-for="(option,index) in options"
            :key="index"
            :label="option.label"
            :value="option.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label style="margin-left: 15px;">
        <el-input v-model="filterForm.engineeringName" placeholder="工程名称"></el-input>
      </el-form-item>
      <el-form-item label>
        <el-input v-model="filterForm.pumpingName" placeholder="施工单位名称"></el-input>
      </el-form-item>
      <el-form-item label>
        <el-button type="primary" @click="getList">搜索</el-button>
        <el-button @click="resetFilter">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="isLoading"
      @selection-change="handleSelectionChange"
      :data="tableData"
      style="width: 100%;margin-top: 15px;"
    >
      <el-table-column align="center" :selectable="selectable" type="selection" width="55" />
      <!-- 订单数据 -->
      <el-table-column align="center" prop="id" label="订单ID" fixed="left"></el-table-column>
      <el-table-column align="center" prop="orderType" label="订单来源" fixed="left"></el-table-column>
      <el-table-column align="center" prop="primaryDesignatorId" label="订单编号" fixed="left"></el-table-column>
      <el-table-column align="center" label="订单类型">
        <template slot-scope="scope">
          <span>{{ scope.orderType == 1 ? "来料加工" : "普通订单" }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="pay" label="是否预付款">
        <template slot-scope="scope">{{ scope.row.pay === 0 ? '否' : '是' }}</template>
      </el-table-column>
      <el-table-column label="订单状态">
        <template slot-scope="scope">
          <span v-if="scope.row.auditType == 0">拒绝</span>
          <span v-if="scope.row.auditType == 1">审核中</span>
          <span v-if="scope.row.auditType == 2">待生产</span>
          <span v-if="scope.row.auditType == 3">生产中</span>
          <span v-if="scope.row.auditType == 4">生产暂停</span>
          <span v-if="scope.row.auditType == 5">订单完工</span>
          <span v-if="scope.row.auditType == 6">订单过期</span>
          <span v-if="scope.row.auditType == 7">订单取消</span>
        </template>
      </el-table-column>

      <!-- 工程数据 -->
      <el-table-column prop="engineeringName" label="工程名称"></el-table-column>
      <el-table-column prop="construction_unit" label="施工单位"></el-table-column>
      <el-table-column prop="transport" label="运距"></el-table-column>
      <el-table-column prop="instructions" label="开工说明"></el-table-column>
      <el-table-column prop="address" label="施工地点"></el-table-column>

      <!-- 生产数据 -->
      <el-table-column prop="transVolume" label="累计生产方量"></el-table-column>

      <!-- 客户需求 -->
      <el-table-column prop="startTime" label="计划开工时间"></el-table-column>
      <el-table-column prop="plannedVolume" label="计划方量"></el-table-column>
      <el-table-column prop="positionName" label="部位名称">
        <template slot-scope="scope">{{ scope.row.positionName | positionFilter }}</template>
      </el-table-column>
      <el-table-column prop="pumpingId" label="泵送类型"></el-table-column>
      <el-table-column prop="slump" label="塌落度"></el-table-column>
      <el-table-column label="是否超方">
        <template slot-scope="scope">{{ scope.row.supersquare === 0 ? '否' : '是' }}</template>
      </el-table-column>
      <el-table-column prop="information" label="要求资料">
        <template slot-scope="scope">{{ scope.row.information === 0 ? '否' : '是' }}</template>
      </el-table-column>
      <el-table-column prop="ds" label="是否冬施">
        <template slot-scope="scope">{{ scope.row.ds === 0 ? '否' : '是' }}</template>
      </el-table-column>
      <el-table-column prop="deliveryTpye" label="配送方式">
        <template slot-scope="scope">{{ scope.row.deliveryTpye === 0 ? '需配送' : '自提' }}</template>
      </el-table-column>

      <!-- 物流数据 -->
      <el-table-column align="center" label="累计车次"></el-table-column>
      <el-table-column align="center" label="累计泵浆"></el-table-column>

      <!-- 标准配比数据 -->
      <el-table-column align="center" label="标准配合比"></el-table-column>

      <!-- 开盘配比数据 -->
      <el-table-column align="center" label="开盘配合比"></el-table-column>

      <!-- 时间戳 -->
      <el-table-column align="center" prop="startTime" label="时间戳"></el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <div class="footer-btn">
      <el-button @click="cancle">取消</el-button>
      <el-button @click="submit" type="primary">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listOrders, ordersScheduling } from '@/api/service/orderCenter/automaticScheduling'
import utils from '@/utils/columnFilter.js';
export default {
  data() {
    return {
      dialogVisible: false,
      filterForm: {
        startTime: '',
        engineeringName: '',
        pumpingName: '',
        auditType: 2, //待生产
      },
      options: [
        { label: '今天' + utils.getTodayDate(), value: utils.getTodayDate() },
        { label: '明天' + utils.getTomorrowDate(), value: utils.getTomorrowDate() }
      ],
      tableData: [],
      total: 0,
      selectedRows: [],
      isLoading: false,
      // 分页查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  filters: {
    positionFilter: utils.positionFilter
  },
  props: {
    tabActiveIndex: {
      type: Number,//0今日 1明日
      default: 0
    }
  },
  methods: {
    showFilterDialog() {
      this.dialogVisible = true;
      this.filterForm.startTime = this.tabActiveIndex == 0 ? utils.getTodayDate() : utils.getTomorrowDate();
      this.getList()
    },
    // 禁用行选择
    selectable(row) {
      // 订单状态为“待生产”的订单，且已被生成生产排序的订单置灰不可选
      if (row.auditType == 2 && (row.produceType == 1 || row.produceType == 2)) {
        return false
      } else {
        return true
      }
    },
    // 取消
    cancle() {
      this.resetFilter()
      this.dialogVisible = false;
      this.selectedRows = []
      this.tableData = []
      this.$emit("updata")
    },
    // 确认
    submit() {
      if (!this.selectedRows.length) return this.$message.error("您还没选择!")
      const ids = this.selectedRows.map(item => item.id)
      ordersScheduling({
        orderIds: ids,
        time: utils.getTodayDateWithTime()
      }).then(res => {
        this.$message.success("新增成功!")
        this.cancle()
      })
    },
    // 重置功能
    resetFilter() {
      this.filterForm = {
        startTime: utils.getTodayDate(),
        engineeringName: '',
        pumpingName: '',
        auditType: 2,
      }
      this.getList()
    },
    // 获取表格数据
    getList() {
      this.isLoading = true
      listOrders({
        ...this.filterForm,
        ...this.queryParams
      }).then(res => {
        if (res.code == 200 && res.rows.length) {
          this.tableData = [...res.rows]
          this.total = res.total
          return
        }
        this.tableData = []
      }).catch(error => {
        this.tableData = []
      }).finally(() => {
        this.isLoading = false
      });
    },
    handleSelectionChange(selection) {
      console.log('%c [ selection ]-201', 'font-size:13px; background:pink; color:#bf2c9f;', selection)
      this.selectedRows = selection;
    },
    handleSizeChange(size) {
      this.queryParams.pageNum = size;
    },
    handleCurrentChange(page) {
      this.queryParams.pageNum = page;
    }
  }
};
</script>
<style lang="scss">
.footer-btn {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
